let imageUrl
$(function () {
    layui.use(['form', 'layer','jquery','upload'],
        function() {
            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;
            let upload = layui.upload;

            var uploadInst = upload.render({
                elem: '#test1'
                , url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#img').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res) {
                    // console.log(res)
                    $("#image").val(res.data.src);
                    imageUrl=res.data.src;
                    //如果上传失败
                    if (res.code > 0) {
                        return layer.msg('上传失败');
                    }

                }

            });
            //自定义验证规则
            form.verify({
                name: [/^[\u4e00-\u9fa5a-zA-Z0-9]{2,12}$/, "姓名必须2到12位"],
                age:[/^(?:[1-9][0-9]?|1[01][0-9]|120)$/,"年龄只能是1-120的整数"],
                phone: [/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,"手机号格式不正确"],
            });

            const E = window.wangEditor;
            const editor = new E('#introduce');
            const editUrl = '/upload';//服务器访问地址
            editor.customConfig.uploadImgShowBase64 = true;  // 使用 base64 保存图片
            editor.customConfig.uploadImgServer = editUrl; // 上传图片到服务器
            editor.customConfig.showLinkImg = false;// 隐藏“网络图片”tab
//配置属性名称，绑定请求的图片数据
            editor.customConfig.uploadFileName = 'wangEditorUrl';
            editor.customConfig.withCredentials = true;
// 将图片大小限制为 5M
            editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;
            editor.customConfig.uploadImgHooks = {

                success: function (xhr, editor, result) {
                    // 图片上传并返回结果，图片插入成功之后触发
                    // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                    console.log(result);
                },
                // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
                // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
                customInsert: function (insertImg, result, editor) {
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                    // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                    let url = result.data.src;
                    console.log(url);
                    insertImg(url)//回显到富文本里面
                    // result 必须是一个 JSON 格式字符串！！！否则报错
                }
            };

//富文本创建
            editor.create();
            //得到id后，根据id查询数据库，赋值给前端表单
            let lawyerId = sessionStorage.getItem("lawyerId")
            $.ajax({
                url:'/back/FindLawyerById',
                data:{id:lawyerId},
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    //赋值
                    console.log(res);
                    setData(res.data);
                    imageUrl=res.data.image
                    console.log(imageUrl)

                }
            })
            function setData(data) {
                form.val('form', {
                     "name": data.name // "name": "value"
                    , "sex": data.sex
                    // , "image": data.image
                    , "age": data.age
                    , "phone": data.phone //复选框选中状态
                    , "role": data.role
                    , "address": data.address
                    // , "introduce": data.introduce
                    , 'remark': data.remark
                });
                editor.txt.html(data.introduce);
                $("#img").attr("src",data.image);
                $("input[type=radio][name=enable][value=" + data.enable + "]").attr("checked", "checked");
                form.render();//重新渲染表单
            }




            //监听提交
            form.on('submit(update)',
                function(data) {
                    data = data.field;
                    data.image=imageUrl;
                    // console.log(data);
                    // 拿到表单提交的富文本数据
                    data.introduce = editor.txt.html();
                    //根据id修改
                    data.id = sessionStorage.getItem("lawyerId")//修改servlet里没有传id，需获取从user-list.js传过来的id
                    $.ajax({
                        url:'/back/UpdateLawyer',
                        data:data,
                        type:'post',
                        dataType:'json',
                        success: function (res) {
                            if (res.count>0){
                                //发异步，把数据提交给java
                                layer.alert(res.msg, {
                                        icon: 6
                                    },
                                    function() {
                                        //关闭当前frame
                                        xadmin.close();

                                        // 可以对父窗口进行刷新
                                        xadmin.father_reload();
                                    });
                            }else {
                                layer.alert(res.msg)
                            }
                        }
                    })
                    return false;
                });

        });
})